<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 常用属性练习</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <header>
        <h1 id="header">CSS 常用属性</h1>
    </header>
    <main>
        <section>
            <h2>文本样式属性</h2>
            <p>使用 CSS 可以设定文本的字体、大小、粗细、倾斜、行间距、缩进方式、颜色等等，页面大部分内容都是以文字的形式出现，因此，文本的相关样式表的属性和值需要熟练掌握。</p>
        </section>
        <section>
            <h3>设置行间距</h3>
        </section>
        <p id="hang">为了增强文字的易读性，我们通常要调整段落中的文字行间距，使用比较大的行间距能够提高文字的可识别性。对于一些不重要的信息，我们可以缩小行间距，使之显得更加紧凑。在 CSS 中，使用
            line-height
            属性来控制行间距的大小，它的值除了可以采用相对单位、绝对单位和百分比之外，还可以是没有单位的数字。</p>
        <section>
            <h3>控制字符间距</h3>
        </section>
        <p id="zifu">通常情况下，中文字符的字间距不用做额外的调整，但有时由于版面空间有限，需要将较长的标题安排在某个固定的空间内，在不删除字数的情况下，我们可以利用 CSS 提供的 letter-spacing
            属性来增加或缩小中文字符之间的间距。letter-spacing 的值是带单位的数字。</p>
        <section id="text-prop">
            <h3>视图窗口相对长度</h3>
            <div></div>
        </section>
        <section id="bg-section">
            <h2>背景</h2>
            <p>CSS 中提供了为元素设定背景的功能，我们看到许多设计精良的网页，在很大程度上是灵活运用 CSS 背景实现装饰效果的。在 CSS
                中，不但可以为整个网页设定背景，也可为具体元素设定背景，任何可显示出来的元素都可以设定背景样式。</p>
        </section>
        <section>
            <h2>盒模型</h2>
            <p>元素的盒模型由外边距 (margin)、边框线 (border)、内边距（padding）以及元素的内容（content）构成，CSS 对外边距、边框线、内边距的控制可以分方向进行，也可以整体控制。
            </p>
            <div class="box-demo">盒模型</div>
            <div class="box-demo">盒模型</div>
            <div class="box-demo">盒模型</div>
        </section>
        <section>
            <h2>信息流</h2>
        </section>
        <p>浏览器在呈现信息时会按照元素的类型进行处理，它将块元素从上到下显示（块元素与块元素之间另起一行），将行内元素按语言方向水平显示（如汉字、英语是从左到右，维吾尔语、阿拉伯语等有些语言是从右到左），行内元素直到到达容器边缘时才换行显示，这种显示元素的方式叫做页面的正常流。
        </p>
        <p>常见的大多数元素属于块元素，如 p、table、div、li、ul、ol、object、h1-h6 等等，行内元素有 a、span、img、b、strong
            等等。需要注意的是，匿名内容（即没有使用元素标签标注的内容）也按行内元素处理。</p>
    </main>
    <footer>
        <p id="footer"><span>《网页设计与制作》课程练习</span> <span>学号：P171212407</span> <span>指导老师：杨志宏</span></p>
    </footer>
</body>

</html>